<template>
	<view class="main">
		<view class="return" @click="toReturn()" style="box-shadow: 1rpx 2rpx 4rpx 2rpx gainsboro;">
			<u-icon name="arrow-left" size="20"></u-icon>
		</view>
		<view class="search">
			<u-search bgColor="RGBA(255, 255, 255, 0.7)" searchIconColor="#00af91ad" :actionStyle="actionStyle" placeholder="搜索关键字" :showAction="true"
				v-model="keyword" @change="toSearch()" @custom="toSearch()"></u-search>
		</view>
		<view class="tabs">
			<u-tabs :current="currentIndex" :scrollable="false" @click="click" :list="list4" lineWidth="80"
				lineHeight="12" :lineColor="`url(${lineBg}) 100% 100%`" :activeStyle="{
			        color: '#303133',
			        fontWeight: 'bold',
			        transform: 'scale(1.05)',fontSize:'30rpx'
			    }" :inactiveStyle="{
			        color: '#606266',
			        transform: 'scale(1)',fontSize:'28rpx'
			    }" itemStyle="height: 34px">
			</u-tabs>
		</view>
		<view class="list flex between"
			v-for="(item,index) in list" :key="index" @click="toInfo(item.id)">
			<image class="cover" :src="item.cover" mode="aspectFill"></image>
			<view class="info">
				<view class="title">{{item.name}}</view>
				<view style="font-size: 24rpx;color: gray;margin-top: 10rpx;">{{currentIndex==0?'旅游景点':currentIndex==1?'场馆预约':currentIndex==2?'酒店民宿':'餐饮美食'}}</view>
				<!-- <view class="tabs flex align">
					<view v-for="(item2,index) in item.tags" :key="index">{{item2}}</view>
				</view> -->
				<view class="between address">
					<view class="ponit flex align" v-if="item.open_time&&item.open_time!=''" style="margin-bottom: 10rpx;">
						<u-icon name="clock-fill"></u-icon>
						<!-- <image src="/static/location2.png"></image> -->
						<view class="clockView" style="margin-left: 5rpx">{{item.open_time}}</view>
					</view>
					<view class="ponit flex align">
						<u-icon name="map-fill"></u-icon>
						<!-- <image src="/static/location2.png"></image> -->
						<view class="clockView">{{item.address}}</view>
					</view>
				</view>
			</view>
			<view class="status" v-if="item.average_price!=0&&item.average_price!=null">￥{{item.average_price}}
				<text style="font-size: 20rpx;">/人</text>
			</view>
		</view>
		<xw-empty :isShow="empty" text="暂无数据" textColor="#777777"></xw-empty>
	<!-- 返回顶部按钮 -->
	<view class="back-to-top" v-if="showBack" @click="handleTop">
		<image src="/static/top.png" mode="widthFix"></image>
	</view>
	</view>
</template>

<script>
	import {
		gourmetList,
		culturalList,
		scenicList,
		hotelList
	} from '@/api/apiData.js';
	const lineBg =
		""
	export default {
		data() {
			return {
				actionStyle: {
					// background:'#fff',
					color: '#00af91ad',
					fontWeight: 'bold'
				},
				lineBg: lineBg,
				keyword: '',
				list4: [{
					name: '旅游景点'
				}, {
					name: '场馆预约'
				}, {
					name: '酒店民宿'
				}, {
					name: '餐饮美食'
				}],
				currentIndex: 0,
				totalPage: 1,
				page: 0,
				offset: 10,
				list: [],
				scrollTop: 0,
				empty: false,
				loadText: {
					loadmore: '点击或上拉加载更多',
					loading: '努力加载中',
					nomore: '实在没有了'
				},
				status: 'loadmore',
				showBack: false,
				ws: null,
				path: '/pages/search/search'
			};
		},
		onPageScroll(e) {
			const that = this;
			that.scrollTop = e.scrollTop;
			// 监听页面滚动事件
			if (e.scrollTop >= 100) {
				this.showBack = true; // 滚动距离超过100px时显示返回顶部按钮
			} else {
				this.showBack = false; // 否则隐藏返回顶部按钮
			}
		},
		onReachBottom() {
			const that = this;
			that.getlist();
		},
		onLoad(option) {
			this.keyword = option.keyword
			this.getlist()
		},
		onShow() {
			this.connectWebSocket()
		},
		onHide() {
			// 页面隐藏/切入后台时触发
			let that = this
			that.sendData({
				type: 'page_leave',
				path: that.path,
				params: ""
			});
		},
		onUnload() {
			// 页面卸载时触发
			let that = this
			that.sendData({
				type: 'page_leave',
				path: that.path,
				params: ""
			});
		},
		methods: {
			// 连接
			connectWebSocket() {
				let that = this
				const wsUrl = "wss://gxtravel.ncscloudmedia.com/wss"; // 确保使用wss（WebSocket Secure）如果服务器支持
				that.ws = new WebSocket(wsUrl);
				that.ws.onopen = () => {
					// console.log("连接已建立");
					// 这里可以发送初始化消息等
					that.sendData({
						type: 'page_enter',
						path: that.path,
						params: ""
					});
				};
				that.ws.onmessage = (event) => {
					console.log("Message from server ", event.data);
					// 处理接收到的消息
				};
				that.ws.onerror = (error) => {
					console.error("连接失败: ", error);
				};
				that.ws.onclose = () => {
					console.log("连接失败，重新连接");
					// 可以在这里尝试重新连接
					that.connectWebSocket();
				};
			},
			// 发送
			sendData(data) {
				if (this.ws && this.ws.readyState === WebSocket.OPEN) {
					// this.ws.send(data); // 确保发送JSON格式的数据
					this.ws.send(JSON.stringify(data)); // 确保发送JSON格式的数据
				} else {
					console.error("WebSocket is not open");
				}
			},
			toInfo(id){
				if(this.currentIndex==0){
					uni.navigateTo({
						url:'/pages/scenic/detail/detail?id='+id
					})
				}
				if(this.currentIndex==1){
					uni.navigateTo({
						url:'/pages/cultural/detail?id='+id
					})
				}
				if(this.currentIndex==2){
					uni.navigateTo({
						url:'/pages/hotel/detail/detail?id='+id
					})
				}
				if(this.currentIndex==3){
					uni.navigateTo({
						url:'/pages/restaurant/detail/detail?id='+id
					})
				}
			},
			toReturn() {
				uni.navigateBack()
			},
			toSearch() {
				console.log(this.keyword)
				this.page = 0
				this.list = []
				this.getlist()
			},
			click(e) {
				console.log(e)
				this.currentIndex = e.index
				this.page = 0
				this.list = []
				this.getlist()
			},
			handleTop() {
				uni.pageScrollTo({
					scrollTop: 0, // 滚动到页面顶部
					duration: 300 // 滚动动画持续时间，单位为毫秒
				});
			},
			async getlist() {
				const that = this;
				const {
					totalPage,
					page,
					offset,
					list,
					keyword,
					currentIndex
				} = that;
				let obj = {
					size: offset,
					page: page + 1,
					name: keyword
				};
				that.status = 'loading';
				if (totalPage > page) {
					let result = ''
					if(currentIndex==0){
						result = await scenicList(obj);
					}
					if(currentIndex==1){
						result = await culturalList(obj);
					}
					if(currentIndex==2){
						result = await hotelList(obj);
					}
					if(currentIndex==3){
						result = await gourmetList(obj);
					}
					if (result.code == 1) {
						that.page = page + 1;
						if (result.data.total == 0) {
							that.empty = true;
							that.status = 'nomore';
							return;
						}
						that.empty = false;
						setTimeout(() => {
							that.status = 'loadmore';
						}, 500);
						that.list = list.concat(result.data.list);
						that.totalPage = Math.ceil(result.data.total / offset);
					}
				} else {
					setTimeout(() => {
						that.status = 'nomore';
					}, 500);
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background: #F6F7FB;
		padding-bottom: 80rpx;
	}
	.main {
		padding-top: 90rpx;
	}

	.search {
		position: relative;
		margin: 0 25rpx;
	}

	.tabs {
		width: 98%;
		margin: 20rpx auto;
	}
	.list {
		background: white;
		border-radius: 16rpx;
		padding: 12rpx;
		margin: 30rpx 25rpx;
		position: relative;
		box-shadow: 1rpx 1rpx 5rpx 1rpx gainsboro;
	
		.cover {
			width: 28%;
			height: 184rpx;
			border-radius: 16rpx;
		}
	
		.info {
			// margin-left: 12rpx;
			width: 70%;
	
			.title {
				font-size: 32rpx;
				overflow: hidden;
				white-space: nowrap;//内容超出不换行
				text-overflow: ellipsis;
			}
	
			.tabs {
				margin: 20rpx 0 20rpx;
				flex-wrap: wrap;
	
				view {
					background: #DAF5EF;
					border-radius: 8rpx;
					color: #00AF91;
					font-size: 24rpx;
					padding: 0 12rpx;
					margin-right: 12rpx;
					margin-bottom: 10rpx;
				}
			}
	
			.address {
				position: absolute;
				bottom: 10rpx;
				.ponit {
					color: #6C7A94;
					font-size: 24rpx;
	
					image {
						width: 24rpx;
						height: 30rpx;
						margin-right: 4rpx;
					}
					.clockView{
						overflow: hidden;
						white-space: nowrap;//内容超出不换行
						text-overflow: ellipsis;
						width: 250px;
					}
	
					// view {
					// 	width: 90%;
					// }
				}
	
			}
		}
	
		.add-btn {
			background: linear-gradient(to right, #12D5B4, #08C1A1, #00AF91);
			color: white;
			width: 160rpx;
			line-height: 56rpx;
			border-radius: 32rpx;
			text-align: center;
			position: absolute;
			right: 0;
			bottom: 12rpx;
		}
	
		.status {
			color: #E5404F;
			font-size: 32rpx;
			font-weight: bold;
			position: absolute;
			top: 10rpx;
			right: 10rpx;
		}
	}
</style>